<!doctype html>


<html>
<head>
  <link rel="shortcut icon" href="static/images/favicon.ico" type="image/x-icon">
  <title>classlist.js (Closure Library API Documentation - JavaScript)</title>
  <link rel="stylesheet" href="static/css/base.css">
  <link rel="stylesheet" href="static/css/doc.css">
  <link rel="stylesheet" href="static/css/sidetree.css">
  <link rel="stylesheet" href="static/css/prettify.css">

  <script>
     var _staticFilePath = "static/";
     var _typeTreeName = "goog";
     var _fileTreeName = "Source";
  </script>

  <script src="static/js/doc.js">
  </script>


  <meta charset="utf8">
</head>

<body onload="grokdoc.onLoad();">

<div id="header">
  <div class="g-section g-tpl-50-50 g-split">
    <div class="g-unit g-first">
      <a id="logo" href="index.html">Closure Library API Documentation</a>
    </div>

    <div class="g-unit">
      <div class="g-c">
        <strong>Go to class or file:</strong>
        <input type="text" id="ac">
      </div>
    </div>
  </div>
</div>





<div class="colmask rightmenu">
<div class="colleft">
    <div class="col1">
      <!-- Column 1 start -->

<div id="title">
       <span class="fn">classlist.js</span>
</div>

<div class="g-section g-tpl-75-25">
  <div class="g-unit g-first" id="description">
    <span class='nodesc'>No description.</span>
  </div>
  

        <div class="g-unit" id="useful-links">
          <div class="title">Useful links</div>
          <ol>
            <li><a href="local_closure_goog_dom_classlist.js.source.html"><span class='source-code-link'>Source Code</span></a></li>
            <li><a href="http://code.google.com/p/closure-library/source/browse/local/closure/goog/dom/classlist.js">Git</a></li>
          </ol>
        </div>
</div>

<h2 class="g-first">File Location</h2>
  <div class="g-section g-tpl-20-80">
    <div class="g-unit g-first">
      <div class="g-c-cell code-label">/goog/dom/classlist.js</div>
    </div>
  </div>
<hr/>


   
<br/>

  <div class="legend">
        <span class="key publickey"></span><span>Public</span>
        <span class="key protectedkey"></span><span>Protected</span>
        <span class="key privatekey"></span><span>Private</span>
  </div>









<div class="section">
  <table class="horiz-rule">


  </table>
</div>




  <h2>Global Functions</h2>





<div class="section">
  <table class="horiz-rule">


     <tr class="even entry public">
       <td class="access"></td>






  <td>
    <a name="goog.dom.classlist.add"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.dom.classlist.</span><span class="entryName">add<span class="args">(<span class="arg">element</span>,&nbsp;<span class="arg">className</span>)</span>
        </span>
      </div>


     <div class="entryOverview">
       Adds a class to an element.  Does not add multiples of class names.  This
method may throw a DOM exception for an invalid or empty class name if
DOMTokenList is used.

     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">element</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/DOM/Element">Element</a></span>
        <div class="entryOverview">DOM node to add class to.</div>
     </td>
   </tr>
     
   <tr class="odd">
     <td>
        <span class="entryName">className</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span>
        <div class="entryOverview">Class name to add.</div>
     </td>
   </tr>
  </table>
      </div>
   
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_dom_classlist.js.source.html#line89">code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry public">
       <td class="access"></td>






  <td>
    <a name="goog.dom.classlist.addAll"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.dom.classlist.</span><span class="entryName">addAll<span class="args">(<span class="arg">element</span>,&nbsp;<span class="arg">classesToAdd</span>)</span>
        </span>
      </div>


     <div class="entryOverview">
       Convenience method to add a number of class names at once.

     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">element</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/DOM/Element">Element</a></span>
        <div class="entryOverview">The element to which to add classes.</div>
     </td>
   </tr>
     
   <tr class="odd">
     <td>
        <span class="entryName">classesToAdd</span>
        : <span class="type">goog.array.ArrayLike</span>.&lt;<span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span>&gt;
        <div class="entryOverview">An array-like object
containing a collection of class names to add to the element.
This method may throw a DOM exception if classesToAdd contains invalid
or empty class names.</div>
     </td>
   </tr>
  </table>
      </div>
   
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_dom_classlist.js.source.html#line111">code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry public">
       <td class="access"></td>






  <td>
    <a name="goog.dom.classlist.addRemove"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.dom.classlist.</span><span class="entryName">addRemove<span class="args">(<span class="arg">element</span>,&nbsp;<span class="arg">classToRemove</span>,&nbsp;<span class="arg">classToAdd</span>)</span>
        </span>
      </div>


     <div class="entryOverview">
       Adds and removes a class of an element.  Unlike
<code> goog.dom.classlist.swap</code>, this method adds the classToAdd regardless
of whether the classToRemove was present and had been removed.  This method
may throw a DOM exception if the class names are empty or invalid.


     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">element</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/DOM/Element">Element</a></span>
        <div class="entryOverview">DOM node to swap classes on.</div>
     </td>
   </tr>
     
   <tr class="odd">
     <td>
        <span class="entryName">classToRemove</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span>
        <div class="entryOverview">Class to remove.</div>
     </td>
   </tr>
     
   <tr class="even">
     <td>
        <span class="entryName">classToAdd</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span>
        <div class="entryOverview">Class to add.</div>
     </td>
   </tr>
  </table>
      </div>
   
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_dom_classlist.js.source.html#line274">code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry public">
       <td class="access"></td>






  <td>
    <a name="goog.dom.classlist.contains"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.dom.classlist.</span><span class="entryName">contains<span class="args">(<span class="arg">element</span>,&nbsp;<span class="arg">className</span>)</span>
        </span>
        &#8658; <span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">boolean</a></span>
      </div>


     <div class="entryOverview">
       Returns true if an element has a class.  This method may throw a DOM
exception for an invalid or empty class name if DOMTokenList is used.

     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">element</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/DOM/Element">Element</a></span>
        <div class="entryOverview">DOM node to test.</div>
     </td>
   </tr>
     
   <tr class="odd">
     <td>
        <span class="entryName">className</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span>
        <div class="entryOverview">Class name to test for.</div>
     </td>
   </tr>
  </table>
      </div>
   
      <div class="detailsSection">
        <b>Returns:</b>&nbsp;<span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">boolean</a></span>&nbsp;
            Whether element has the class.
      </div>
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_dom_classlist.js.source.html#line74">code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry public">
       <td class="access"></td>






  <td>
    <a name="goog.dom.classlist.enable"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.dom.classlist.</span><span class="entryName">enable<span class="args">(<span class="arg">element</span>,&nbsp;<span class="arg">className</span>,&nbsp;<span class="arg">enabled</span>)</span>
        </span>
      </div>


     <div class="entryOverview">
       Adds or removes a class depending on the enabled argument.  This method
may throw a DOM exception for an invalid or empty class name if DOMTokenList
is used.

     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">element</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/DOM/Element">Element</a></span>
        <div class="entryOverview">DOM node to add or remove the class on.</div>
     </td>
   </tr>
     
   <tr class="odd">
     <td>
        <span class="entryName">className</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span>
        <div class="entryOverview">Class name to add or remove.</div>
     </td>
   </tr>
     
   <tr class="even">
     <td>
        <span class="entryName">enabled</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">boolean</a></span>
        <div class="entryOverview">Whether to add or remove the class (true adds,
    false removes).</div>
     </td>
   </tr>
  </table>
      </div>
   
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_dom_classlist.js.source.html#line202">code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry public">
       <td class="access"></td>






  <td>
    <a name="goog.dom.classlist.enableAll"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.dom.classlist.</span><span class="entryName">enableAll<span class="args">(<span class="arg">element</span>,&nbsp;<span class="arg">classesToEnable</span>,&nbsp;<span class="arg">enabled</span>)</span>
        </span>
      </div>


     <div class="entryOverview">
       Adds or removes a set of classes depending on the enabled argument.  This
method may throw a DOM exception for an invalid or empty class name if
DOMTokenList is used.

     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">element</span>
        : <span>!</span><span class="type"><a href="https://developer.mozilla.org/en/DOM/Element">Element</a></span>
        <div class="entryOverview">DOM node to add or remove the class on.</div>
     </td>
   </tr>
     
   <tr class="odd">
     <td>
        <span class="entryName">classesToEnable</span>
        : <span class="type">goog.array.ArrayLike</span>.&lt;<span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span>&gt;
        <div class="entryOverview">An array-like object
    containing a collection of class names to add or remove from the element.</div>
     </td>
   </tr>
     
   <tr class="even">
     <td>
        <span class="entryName">enabled</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">boolean</a></span>
        <div class="entryOverview">Whether to add or remove the classes (true adds,
    false removes).</div>
     </td>
   </tr>
  </table>
      </div>
   
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_dom_classlist.js.source.html#line221">code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry public">
       <td class="access"></td>






  <td>
    <a name="goog.dom.classlist.enableAll&f"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.dom.classlist.</span><span class="entryName">enableAll&f<span class="args">()</span>
        </span>
      </div>


     <div class="entryOverview">
       <span class='nodesc'>No description.</span>
     </div>

   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_dom_classlist.js.source.html#line222">code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry public">
       <td class="access"></td>






  <td>
    <a name="goog.dom.classlist.get"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.dom.classlist.</span><span class="entryName">get<span class="args">(<span class="arg">element</span>)</span>
        </span>
        &#8658; <span>!</span><span class="type">goog.array.ArrayLike</span>
      </div>


     <div class="entryOverview">
       Gets an array-like object of class names on an element.

     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">element</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/DOM/Element">Element</a></span>
        <div class="entryOverview">DOM node to get the classes of.</div>
     </td>
   </tr>
  </table>
      </div>
   
      <div class="detailsSection">
        <b>Returns:</b>&nbsp;<span>!</span><span class="type">goog.array.ArrayLike</span>&nbsp;
            Class names on <code> element</code>.
      </div>
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_dom_classlist.js.source.html#line44">code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry public">
       <td class="access"></td>






  <td>
    <a name="goog.dom.classlist.remove"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.dom.classlist.</span><span class="entryName">remove<span class="args">(<span class="arg">element</span>,&nbsp;<span class="arg">className</span>)</span>
        </span>
      </div>


     <div class="entryOverview">
       Removes a class from an element.  This method may throw a DOM exception
for an invalid or empty class name if DOMTokenList is used.

     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">element</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/DOM/Element">Element</a></span>
        <div class="entryOverview">DOM node to remove class from.</div>
     </td>
   </tr>
     
   <tr class="odd">
     <td>
        <span class="entryName">className</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span>
        <div class="entryOverview">Class name to remove.</div>
     </td>
   </tr>
  </table>
      </div>
   
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_dom_classlist.js.source.html#line148">code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry public">
       <td class="access"></td>






  <td>
    <a name="goog.dom.classlist.removeAll"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.dom.classlist.</span><span class="entryName">removeAll<span class="args">(<span class="arg">element</span>,&nbsp;<span class="arg">classesToRemove</span>)</span>
        </span>
      </div>


     <div class="entryOverview">
       Removes a set of classes from an element.  Prefer this call to
repeatedly calling <code> goog.dom.classlist.remove</code> if you want to remove
a large set of class names at once.

     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">element</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/DOM/Element">Element</a></span>
        <div class="entryOverview">The element from which to remove classes.</div>
     </td>
   </tr>
     
   <tr class="odd">
     <td>
        <span class="entryName">classesToRemove</span>
        : <span class="type">goog.array.ArrayLike</span>.&lt;<span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span>&gt;
        <div class="entryOverview">An array-like object
containing a collection of class names to remove from the element.
This method may throw a DOM exception if classesToRemove contains invalid
or empty class names.</div>
     </td>
   </tr>
  </table>
      </div>
   
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_dom_classlist.js.source.html#line175">code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry public">
       <td class="access"></td>






  <td>
    <a name="goog.dom.classlist.set"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.dom.classlist.</span><span class="entryName">set<span class="args">(<span class="arg">element</span>,&nbsp;<span class="arg">className</span>)</span>
        </span>
      </div>


     <div class="entryOverview">
       Sets the entire class name of an element.

     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">element</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/DOM/Element">Element</a></span>
        <div class="entryOverview">DOM node to set class of.</div>
     </td>
   </tr>
     
   <tr class="odd">
     <td>
        <span class="entryName">className</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span>
        <div class="entryOverview">Class name(s) to apply to element.</div>
     </td>
   </tr>
  </table>
      </div>
   
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_dom_classlist.js.source.html#line62">code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry public">
       <td class="access"></td>






  <td>
    <a name="goog.dom.classlist.swap"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.dom.classlist.</span><span class="entryName">swap<span class="args">(<span class="arg">element</span>,&nbsp;<span class="arg">fromClass</span>,&nbsp;<span class="arg">toClass</span>)</span>
        </span>
        &#8658; <span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">boolean</a></span>
      </div>


     <div class="entryOverview">
       Switches a class on an element from one to another without disturbing other
classes. If the fromClass isn't removed, the toClass won't be added.  This
method may throw a DOM exception if the class names are empty or invalid.

     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">element</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/DOM/Element">Element</a></span>
        <div class="entryOverview">DOM node to swap classes on.</div>
     </td>
   </tr>
     
   <tr class="odd">
     <td>
        <span class="entryName">fromClass</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span>
        <div class="entryOverview">Class to remove.</div>
     </td>
   </tr>
     
   <tr class="even">
     <td>
        <span class="entryName">toClass</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span>
        <div class="entryOverview">Class to add.</div>
     </td>
   </tr>
  </table>
      </div>
   
      <div class="detailsSection">
        <b>Returns:</b>&nbsp;<span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">boolean</a></span>&nbsp;
            Whether classes were switched.
      </div>
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_dom_classlist.js.source.html#line237">code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry public">
       <td class="access"></td>






  <td>
    <a name="goog.dom.classlist.toggle"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.dom.classlist.</span><span class="entryName">toggle<span class="args">(<span class="arg">element</span>,&nbsp;<span class="arg">className</span>)</span>
        </span>
        &#8658; <span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">boolean</a></span>
      </div>


     <div class="entryOverview">
       Removes a class if an element has it, and adds it the element doesn't have
it.  Won't affect other classes on the node.  This method may throw a DOM
exception if the class name is empty or invalid.

     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">element</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/DOM/Element">Element</a></span>
        <div class="entryOverview">DOM node to toggle class on.</div>
     </td>
   </tr>
     
   <tr class="odd">
     <td>
        <span class="entryName">className</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span>
        <div class="entryOverview">Class to toggle.</div>
     </td>
   </tr>
  </table>
      </div>
   
      <div class="detailsSection">
        <b>Returns:</b>&nbsp;<span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">boolean</a></span>&nbsp;
            True if class was added, false if it was removed
    (in other words, whether element has the class after this function has
    been called).
      </div>
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_dom_classlist.js.source.html#line257">code &raquo;</a>
  </td>
     </tr>


  </table>
</div>






      <!-- Column 1 end -->
    </div>

        <div class="col2">
          <!-- Column 2 start -->
          <div class="col2-c">
            <h2 id="ref-head">Directory dom</h2>
            <div id="localView"></div>
          </div>

          <div class="col2-c">
            <h2 id="ref-head">File Reference</h2>
            <div id="sideFileIndex" rootPath="" current="/goog/dom/classlist.js"></div>
          </div>
          <!-- Column 2 end -->
        </div>
</div>
</div>

</body>
</html>
